<table border="1">
    <thead>
        <tr id="head-tr">
            <th></th>
        </tr>
    </thead>
    <tbody id="body">
        <tr id="tr-original">
        </tr>
    </tbody>
</table>

<script type="text/javascript">
    dataJSON = {
        participantName: 'Selma',
        participants:[
            {
                'name': 'Petr',
                'vote': null
            },
            {
                'name': 'Jirka',
                'vote': null
            },
            {
                'name': 'Selma',
                'vote': null
            },
        ],
        suggestions: []
        
    };

    function suggestionChanged()
    {
        valueSource = document.getElementsByName('suggest[text]');
        valueSourceId = valueSource.id;
        console.log(valueSource.id);
        valueSourceIdArr = valueSourceId.split('-');
        dataJSON['suggestions'][valueSourceIdArr[2]] = valueSource.valueOf();
    }

    /**
     * Prida bunku pro hlavicku
     */
    function appendHeadCell(cellOrder) {
        input = document.createElement('input');
        input.id = 'suggest-text-'+cellOrder;
        input.name = 'suggest[text]';
        input.onchange = 'suggestionChanged';

        headCell = document.createElement('td');
        headCell.className = 'th-original';
        if(dataJSON['participants'][cellOrder]['name']==dataJSON['participantName'])
        {
            headCell.appendChild(input);
        }

        document.getElementById('head-tr').appendChild(headCell);

    }

    /**
     * Prida vrati bunku pro telo
     */
    function getBodyCell(lineOrder, cellOrder) {
	voteButton = document.createElement('button');
	voteButton.setAttribute('type', 'button');
	    
        if(cellOrder==0) {
            cellContent = document.createTextNode(dataJSON['participants'][lineOrder]['name']);
        } else if(lineOrder+1==cellOrder) {
            cellContent = voteButton;
	    cellContent.appendChild(document.createTextNode('Cannnot vote'));
	    cellContent.setAttribute('disabled', 'disabled');
        } else {
            cellContent = voteButton;
	    cellContent.appendChild(document.createTextNode('Vote'));
        }

        tableCell = document.createElement('td');
        tableCell.appendChild(cellContent);

        return tableCell;
    }

    /**
     * Prida radky do tela
     * 
     * @function
     */
    function appendBodyLines(linesCount) {
        tableBody = document.getElementById('body');

        for(lineOrder=0;lineOrder<linesCount;lineOrder++){
            tableLine = document.createElement('tr');
            for(cellOrder=0;cellOrder<linesCount+1;cellOrder++){
                tableLine.appendChild(getBodyCell(lineOrder, cellOrder));
            }
            tableBody.appendChild(tableLine);
        }
    }
    
    for(i=0;i<dataJSON['participants'].length;i++){
        appendHeadCell(i);
    }
    appendBodyLines(dataJSON['participants'].length);
</script>